<template>
    <div>

        <div class="container">
            <!-- 主页 -->
            <div v-show="core">
                <div class="nav">
                    <div>
                        <a href="javascript:;" @click="$router.back()"></a>
                    </div>
                    <div>
                        <span>投诉中心</span>
                    </div>
                    <div @click="subnav = !subnav">
                        <i>&nbsp;&nbsp;&nbsp;&nbsp;</i>
                        <div class="subnav" v-show="subnav">
                            <router-link to="/" tag="a">首页</router-link>
                            <router-link to="/news" tag="a">资讯</router-link>
                            <router-link to="/video" tag="a">视频</router-link>
                            <router-link to="/seek" tag="a">找车</router-link>
                            <router-link to="/plaint" tag="a">汽车投诉</router-link>
                        </div>
                    </div>
                </div>
                <div class="tosu_step">
                    <div class="fir">
                        <em>1</em>
                        <span>投诉内容</span>
                    </div>
                    <div class="step_dashed"></div>
                    <div class="sec">
                        <em>2</em>
                        <span>车辆信息</span>
                    </div>
                </div>
                <div class="tosu_body">
                    <ul>
                        <li>
                            <div @click="brand = true,core = false">
                                <span>车型</span>
                                <span class="more">
                                    <em>{{ brandVal }}</em>
                                </span>
                            </div>
                        </li>
                        <li>
                            <div @click="parts = true,core = false">
                                <span>投诉对象</span>
                                <span class="more">
                                    <em>{{ tosuObj }}</em>
                                </span>
                            </div>
                        </li>
                        <li>
                            <div @click="mode = true,core = false">
                                <span>投诉诉求</span>
                                <span class="more">
                                    <em>{{ tosuType }}</em>
                                </span>
                            </div>
                        </li>
                        <li>
                            <div class="form">
                                <span>投诉主题</span>
                                <input type="text" placeholder="简述遇到的问题，请包含被投诉企业或品牌，25字内">
                            </div>
                        </li>
                        <li>
                            <div class="form">
                                <span>投诉详情</span>
                                <textarea placeholder="请叙述详情，不少于10个字"></textarea>
                            </div>
                        </li>
                        <li>
                            <div class="form">
                                <span>上传照片</span>
                                <div class="upload">
                                    <div class="img" @click="fun">
                                    </div>
                                    <input type="file" accept="image/*" ref="inp" @change="loadImg($event)">
                                    <ul ref="uls" id="uls">
                                        <li v-for="(item,index) in imgList" :key="index"><img :src="item" alt=""></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="next">
                    <router-link tag="span" to="/plaintCon2">下一步 填写车辆信息</router-link>
                </div>
                <div class="cross"></div>
                <div class="footer">
                    <p>您的投诉建议</p>
                    <p>Copyright©2019 汽车消费网 315che.com</p>
                </div>
            </div>
            <!-- 品牌选择 -->
            <div class="brand" v-show="brand">
                <div class="nav">
                    <div>
                        <a href="javascript:;" @click="brand = false,core = true"></a>
                    </div>
                    <div>
                        <span>{{ brandVal }}</span>
                    </div>
                    <div>
                        
                    </div>
                </div>
                <div class="content">
                    <p v-for="(item,index) in carType" :key="index" @click="brand = false, core = true, brandVal = item">{{item}}</p>
                    
                </div>
            </div>
            <!-- 对象选择 -->
            <div class="tosuObj" v-show="parts">
                <div class="nav">
                    <div>
                        <a href="javascript:;" @click="parts = false,core = true"></a>
                    </div>
                    <div>
                        <span>投诉对象选择</span>
                    </div>
                    <div>
                        <i @click="sub(1)">确定</i>
                    </div>
                </div>  
                <div class="content" ref="con">
                    <p :class="item.checked ?'correct':''" @click="classAdd(index,2)" v-for="(item, index) in objList" :key="index">
                        <span>{{item.val}}</span>
                    </p>
                </div>
            </div>
            <!-- 类型选择 -->
            <div class="tosuObj" v-show="mode">
                <div class="nav">
                    <div>
                        <a href="javascript:;" @click="mode = false,core = true"></a>
                    </div>
                    <div>
                        <span>投诉诉求选择</span>
                    </div>
                    <div>
                        <i @click="sub(2)">确定</i>
                    </div>
                </div>  
                <div class="content">
                    <p :class="item.checked ?'correct':''" @click="classAdd(index,1)" v-for="(item, index) in typeList" :key="index">
                        <span>{{item.val}}</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            subnav: false,
            core:true,
            brand:false,
            parts:false,
            mode:false,
            brandVal:"投诉车型",
            tosuObj:"选择投诉对象",
            tosuType:"选择投诉诉求",
            imgList:[],
            carType: [
                "大众",
                "别克",
                "哈弗",
                "福特",
                "宝马",
                "比亚迪",
                "起亚",
                "斯柯达",
                "日产",
                "荣威"],
            objList:[
                {
                    val:"变速器",
                    checked:false
                },
                {
                    val:"发动机",
                    checked:false
                },
                {
                    val:"离合器",
                    checked:false
                },
                {
                    val:"传动与悬架",
                    checked:false
                },
                {
                    val:"刹车系统",
                    checked:false
                },
                {
                    val:"转向系统",
                    checked:false
                },
                {
                    val:"车身和电气",
                    checked:false
                },
                {
                    val:"轮胎",
                    checked:false
                },
                {
                    val:"服务",
                    checked:false
                }
            ],
            typeList:[
                {
                    val:"维修",
                    checked:false
                },
                {
                    val:"赔偿",
                    checked:false
                },
                {
                    val:"召回",
                    checked:false
                },
                {
                    val:"退换车",
                    checked:false
                },
                {
                    val:"赔礼",
                    checked:false
                },
                {
                    val:"改错",
                    checked:false
                },
                {
                    val:"其他",
                    checked:false
                }
            ]
        }
    },
    created() {
        this.$emit("car-show", false);
    },
    methods:{
        fun(){
            this.$refs.inp.click()
        },
        classAdd(ind,type){
             if(type == 1){

                this.typeList[ind].checked = !this.typeList[ind].checked
            }else{
                this.objList[ind].checked = !this.objList[ind].checked
            }
        },
        sub(num){
            
           if(num == 1){
               let aa = this.objList.filter(item => {
                   return item.checked
               })
               this.tosuObj = "";
               aa.forEach(item => {
                   this.tosuObj += item.val + " ";
               })
               if(this.tosuObj == ""){
                   this.tosuObj = "选择投诉对象"
               }
               this.parts = false;
               this.core = true

            }else{
                let aa = this.typeList.filter(item => {
                    return item.checked
                })
               this.tosuType = "";
                aa.forEach(item => {
                    this.tosuType += item.val + " ";
                })
               if (this.tosuType == ""){
                   this.tosuType = "选择投诉诉求"
               }
               this.mode = false;
                this.core = true
           }
        },
        loadImg(e){
            let img = e.target.files[0];
            console.log("img",img);
            var fr = new FileReader();
            fr.readAsDataURL(img);
           
            fr.onloadend =  (event) =>{
               
                let img = event.target.result;
                
                this.imgList.push(img)
            }
           
            
        }
    }
}
</script>

<style lang="scss" scoped>
input::placeholder {
    color: #999;
}
.nav {
    height: 44px;
    background-color: #2070e0;
    display: flex;
    align-items: center;

    &>div {
        &:nth-child(1) {
            text-align: left;
            flex: 1;
        }

        &:nth-child(2) {
            text-align: center;
            flex: 1;
        }

        &:nth-child(3) {
            text-align: right;
            position: relative;
            flex: 1;
            position: relative;
            
                i {
                    display: block;
                    float: right;
            
                }
            .subnav {
                    width: 100px;
                    height: 170px;
                    padding: 6px;
                    border-radius: 4px;
                    position: absolute;
                    top: 35px;
                    left: 12px;
                    background: rgba(0, 0, 0, 0.8);
                    z-index: 9;
            
                    a {
                        width: 100px;
                        height: 18px;
                        padding: 8px 0;
                        text-align: center;
                        background-image: none;
                        color: #fff;
                    }
            
                    &::before {
                        content: "";
                        display: block;
                        position: absolute;
                        top: -17px;
                        left: 80px;
                        border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
                        border-width: 9px;
                        border-style: dashed dashed solid dashed;
                    }
                }
        }
    }

    div {
        a {
            display: block;
            width: 40px;
            height: 40px;
            background-image: url("../assets/img/icons1.png");
            background-position: -82px -32px;
            background-size: 400px auto;
        }

        span {
            color: #fff;
            font-size: 16px;
        }

        i {
            width: 15px;
            height: 18px;
            background-image: url("../assets/img/m-icons.png");
            background-position: -211px 0px;
            background-size: 300px auto;
            margin-right: 15px;
        }
    }
}
.brand{
    .nav{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
    .content{
        p{
            height: 16px;
            padding: 12px 10px;
            color: #333;
            font-size: 16px;
        }
    }
}
.tosuObj{
    .nav{
        div{
            i{
                width: 48px;
                height: 27px;
                line-height: 27px;
                display: block;
                background-image: none;
                position: absolute;
                right: 0;
                top: 50%;
                margin-top: -13px;
                font-style: normal;
                color: #2070e0;
                background-color: #fff;
                text-align: center;
                font-size: 12px;
                border-radius: 4px;
            }
        }
    }
    .content {
        p {
            height: 16px;
            padding: 15px 20px;
            color: #333;
            font-size: 16px;
            display: flex;  
            align-items: center;
            justify-content: space-between;
            span{
                display: block;
            }
        }
        .correct::after{
            content: "";
            width: 11px;
            height: 10px;
            display: block;
            background-image: url('../assets/img/m-icons.png');
            background-size: 252px auto;
            background-position: -87px -46px;
        }
    }
}
.tosu_step{
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    div{
        position: relative;
        em{
            display: block;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            font-style: normal;
            text-align: center;
            line-height: 18px;
            position: absolute;
            font-size: 13px;
            color: #fff;
        }
        span{
            font-size: 14px;
            padding-left: 22px;
        }
    }
    .step_dashed{
        width: 50px;
        border-top: 2px dashed #2070e0;
        margin: 0 6px;
    }
    .fir{
        em{
            background-color: #2070e0;
        }
        span{
            color: #2070e0; 
        }
    }
    .sec{
        em{
            background-color: #ccc;
        }
        span{
            color:#ccc;
        }
    }
}

.tosu_body{
    height: 502px;
    ul{
        padding: 0 20px;
        li{
            border-bottom: 1px solid #e6e6e6;
            div{
                display: flex;
                justify-content: space-between;
                padding: 15px 12px 15px 0;
                span{
                    color: #333;
                    font-size: 16px;
                    width: 64px;
                    em{
                        font-style: normal;
                        flex-wrap: wrap;
                    }
                }
                .more{
                     position: relative;
                     width: 70%;
                     text-align: right;
                    &::after {
                            content: "";
                            display: block;
                            position: absolute;
                            border-width: 1.5px 1.5px 0 0;
                            border-color: #d1d1d1;
                            border-style: solid;
                            width: 8.5px;
                            height: 8.5px;
                            transform: matrix(.71, .71, -.71, .71, 0, 0);
                            top: 50%;
                            margin-top: -4.5px;
                            right: -12px;
                        }
                }
            }
            .form{
                display: block;
                input{
                    width: 100%;
                    padding: 12px 0 2px 0;
                    border: 0px;
                    height: 17px;
                    font-size: 14.5px;
                    color: #333;
                }
                textarea{
                    padding-top: 10px;
                    font-size: 14.5px;
                    width: 100%;
                    height: 40px;
                    line-height: 20px;
                    color: #333;
                    border: .8px;
                }
                .upload{
                    padding-top: 10px;
                    display: flex;
                    justify-content: flex-start;
                    .img{
                        width: 75px;
                        height: 75px;
                        background-image: url('../assets/img/upload-pic-btn.png');
                        background-size: 100%;
                        padding: 0px;
                        display: block;
                    }
                    input{
                        display: none;
                    }
                    ul{
                        display: flex;
                        li img{
                            width: 75px;
                                height: 75px;
                        }
                    }    
                }
            }
        }
    }
}

.next{
    padding: 30px 20px;
    span{
        display: block;
        width: 100%;
        background-color: #2070e0;
        border-radius: 20px;
        font-size: 18px;
        text-align: center;
        line-height: 45px;
        height: 45px;
        color: #fff;
    }
}
.footer {
    height: 44px;
    padding: 25px 20px;
    padding-bottom: 75px;

    p {
        color: #333;
        font-size: 14px;
        text-align: center;

        &:first-of-type {
            padding-bottom: 10px;

            &::before {
                display: inline-block;
                width: 18px;
                height: 14px;
                content: "";
                background-image: url("../assets/img/m-icons.png");
                background-position: -601px 0px;
                background-size: 230px auto;
                margin-right: 3px;
            }
        }
    }
}
</style>